{extend name="../../base/view/common/base" /}
{block name="style"}
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">上报</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray-2">审核状态</td>
            <td><span class="layui-color-{$detail.check_status}">{$detail.status_name}</span></td>
        </tr>
        <tr>
            <td class="layui-td-gray">审批流程<font>*</font></td>
            <td colspan="5">
                <select name="flow_id" lay-verify="required" lay-filter="flowtype" lay-reqText="请选择审批流程">
                    <option value="">--请选择--</option>
                    {volist name="flows" id="vo"}
                    <option value="{$vo.id}" title="{$vo.check_type}">{$vo.name}</option>
                    {/volist}
                </select>
            </td>
        </tr>
        <tr id="flow_tr">
            <td class="layui-td-gray">审核人<font>*</font></td>
            <td colspan="5">
                <input type="hidden" name="check_admin_ids" value="" readonly><input type="text" name="check_admin_name" value="" autocomplete="off" placeholder="请选择审核人" lay-verify="required" lay-reqText="请选择审核人" class="layui-input" readonly>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">抄送人</td>
            <td colspan="5">
                <input type="text" name="copy_names" value="" autocomplete="off" placeholder="请选择审核人" class="layui-input picker-more" readonly><input type="hidden" name="copy_uids" value="" readonly>
            </td>
        </tr>
    </table>
    <div class="py-3">
        <input name="id" id="id" type="hidden" value="{$detail.id}">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即上报</button>
    </div>
    {/block}
    <!-- /主体 -->

    <!-- 脚本 -->
    {block name="script"}
    <script>
        const moduleInit = ['tool', 'employeepicker', 'oaTool'];
        function gouguInit() {
            var form = layui.form, tool = layui.tool, table = layui.table, laydate = layui.laydate, oaTool = layui.oaTool,
                employeepicker = layui.employeepicker;
            //监听提交
            form.on('submit(webform)', function (data) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    if (e.code == 0) {
                        tool.sideClose(1000);
                    }
                }
                tool.post("/busine/businetransfer/report", data.field, callback);
                return false;
            });



            form.on('select(flowtype)', function(data){
                var check_type = data.elem[data.elem.selectedIndex].title;
                var formHtml='<td class="layui-td-gray">审核人<font>*</font></td>\
		<td colspan="5">\
			<input type="text" name="check_admin_name" value="" autocomplete="off" placeholder="请选择审核人" lay-verify="required" lay-reqText="请选择审核人" class="layui-input picker-one"><input type="hidden" name="check_admin_ids" value="">\
		</td>';
                if(check_type == 2){
                    $('#flow_tr').html(formHtml);
                    form.render();
                }
                if(data.value==''){
                    return false;
                }
                $.ajax({
                    url: "/api/index/get_flow_users",
                    type:'get',
                    data:{id:data.value},
                    success: function (e) {
                        if (e.code == 0) {
                            var flowLi='';
                            var flow_data = e.data.flow_data;
                            if(e.data.copy_uids && e.data.copy_uids !=''){
                                $('[name="copy_names"]').val(e.data.copy_unames);
                                $('[name="copy_uids"]').val(e.data.copy_uids.split(','));
                            }
                            if(check_type == 1 || check_type == 3){
                                for(var a=0;a<flow_data.length;a++){
                                    var userList='',sign_type = '';
                                    if(check_type == 1){
                                        if(flow_data[a].flow_type==1){
                                            userList+= '<li style="padding:3px 0">当前部门负责人</li>';
                                        }
                                        else if(flow_data[a].flow_type==2){
                                            userList+= '<li style="padding:3px 0">上级部门负责人</li>';
                                        }
                                        else{
                                            if(flow_data[a].flow_type==3){
                                                sign_type= ' <span class="layui-badge layui-bg-blue">或签</span>';
                                            }
                                            if(flow_data[a].flow_type==4){
                                                sign_type= ' <span class="layui-badge layui-bg-blue">会签</span>';
                                            }
                                            for(var b=0;b<flow_data[a].user_id_info.length;b++){
                                                userList+= '<li style="padding:3px 0"><img src="'+flow_data[a].user_id_info[b].thumb+'" style="width:24px; height:24px; border-radius:50%; margin-right:8px;" />'+flow_data[a].user_id_info[b].name+'</li>';
                                            }
                                        }
                                    }
                                    else if(check_type == 3){
                                        sign_type= ' <span class="layui-badge layui-bg-blue">'+flow_data[a].flow_name+'</span>'
                                        for(var b=0;b<flow_data[a].user_id_info.length;b++){
                                            userList+= '<li style="padding:3px 0"><img src="'+flow_data[a].user_id_info[b].thumb+'" style="width:24px; height:24px; border-radius:50%; margin-right:8px;" />'+flow_data[a].user_id_info[b].name+'</li>';
                                        }
                                    }
                                    flowLi+='<li class="layui-timeline-item">\
								<i class="layui-icon layui-timeline-axis">&#xe63f;</i>\
								<div class="layui-timeline-content">\
								  <p class="layui-timeline-title"><strong>第'+(a+1)+'级审批</strong>'+sign_type+'</p>\
								  <ul>'+userList+'</ul>\
								</div>\
							</li>';
                                }
                                formHtml = '<td class="layui-td-gray">审批流程</td>\
									<td colspan="7">\
										<ul id="flowList" class="layui-timeline">'+flowLi+'</ul>\
									</td>';
                                $('#flow_tr').html(formHtml);
                            }
                        }
                    }
                })
            });
        }
    </script>
    {/block}
    <!-- /脚本 -->